<template>
  <view class="feedback-containet">
    <u-form :model="form" ref="uForm" label-width="140">
      <u-form-item label="类型" prop="type"
        ><u-input
          v-model="type"
          placeholder="请选择类型"
          input-align="right"
          @click="isSelectShow = true"
          disabled
          :clearable="false"
      /></u-form-item>
      <u-form-item label="反馈意见"  prop="content"
        ><u-input
          v-model="content"
          type="textarea"
          placeholder="请填写你的反馈意见"
      /></u-form-item>
      <u-form-item label="联系电话"
        ><u-input
          v-model="tel"
          placeholder="请填写联系电话"
          input-align="right"
      /></u-form-item>
      <u-form-item>
        <vUpload ref="vUpload" />
      </u-form-item>
    </u-form>

    <u-button
      @click="submit"
      shape="circle"
      :custom-style="customStyle"
      native-type="submit"
      >提交</u-button
    >

    <u-picker
      v-model="isSelectShow"
      mode="selector"
      :default-selector="[0]"
      :range="selector"
      cancel-color="black"
      confirm-color="#3745eb"
      @confirm="confirm"
    ></u-picker>
  </view>
</template>

<script>
import { vUpload } from "@/components/v-upload/v-upload.vue";
import { createSuggestion } from "@/api/index";
export default {
  data() {
    return {
      customStyle: {
        color: "white",
        marginTop: "100rpx",
        backgroundColor: "#3745eb",
      },
      isSelectShow: false,
      selector: ["请选择", "意见", "建议"],
      form: {},
      content:"",
      tel:"",
      type: "",
    };
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    // this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    submit() {
      if (this.rules()) return;
      this.$refs["vUpload"].uploadPic((promises) => {
        promises.then((list) => {
          createSuggestion({
            imgs: list,
            content:this.content,
            tel:this.tel,
            userId: this.$store.state.user.user.id,
            // id: 50,
          }).then((res) => {
            this.$refs["vUpload"].resetFileList();
            // this.$set(this.$data,'form',Object.assign({}))
            this.content= ''
            this.tel=''
            this.type = ''
            uni.showToast({
              title: "提交成功",
              duration: 2000,
            });
          });
        });
        // console.log(imgs);
      });
    },
    // picker 点击确认的回调
    confirm(index) {
      // console.log(index);
      if (index[0] > 0) this.type = this.selector[index];
    },
    // uview 校验有bug  弱提示校验
    rules() {
      let text = "";

      if (!this.content) {
        text = "请填写意见反馈";
      }

      if (!this.type) {
        text = "请选择类型";
      }
      if (text) {
        uni.showToast({
          title: text,
          duration: 2000,
        });
      }

      return !!text;
    },
  },
  components: {
    vUpload,
  },
};
</script>

<style>
.feedback-containet {
  position: relative;
  background-color: white;
  margin-top: 10rpx;
  padding: 0 30rpx;
}
</style>
